<template>
  <div id="box">
      <div id="zhong">
          <div id="tou">
              <div id="wen">上新精选</div>
              <div id="zi">精选新品&nbsp;闭眼放心买</div>
          </div>
          <div id="tu" v-for="book in arr" :key="book.id">
              <div id="zuo">
                  <img :src="book.img" alt="">
              </div>
              <div id="you">
                  <div id="yi">{{book.name}}</div>
                  <div id="er">{{book.xiaoname}}</div>
                  <div id="san">{{book.lv}}</div>
                  <div id="si">
                      <div id="a">
                          <img :src="book.zheshangzhe" v-if="book.zheshangzhe">
                      </div>
                      <div id="b" :style="book.suoyouse" v-if="book.youpinmiaosha">{{book.youpinmiaosha}}</div>
                      <div id="c" :style="book.suoyouse" v-if="book.tejia">{{book.tejia}}</div>
                      <div id="d" :style="book.suoyouse" v-if="book.shouhoumianyou">{{book.shouhoumianyou}}</div>
                      <div id="f" :style="book.xiaomise" v-if="book.xiaomiziying">{{book.xiaomiziying}}</div>
                  </div>
                  <div id="wu">{{book.jiage}}</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
import getlink from "../../../../api/apiserver"
export default {
    data(){
        return{
            id: 0,
            arr:[],
        }
    },
    mounted(){
        getlink("/shangxuan").then((ok)=>{
            this.arr=ok.data
        })
    }

}
</script>

<style scoped>
#box{
    width: 100%;
}
#zhong{
    width: 90%;
    margin: auto;
}
#tou{
    width:100%;
    height: .45rem;
    display: flex;
}
#wen{
    font-size: 5.3333vw;
    color: rgb(51, 51, 51);
    font-weight: 600;
    line-height: .45rem;
}
#zi{
    font-size: 3.2vw;
    color: rgb(51, 51, 51);
    line-height: .45rem;
    font-weight: 300;
    margin-left: 0.03rem;
}
#tu{
    width: 100%;
    height: 34.6667vw;
    display: flex;
    justify-content: space-between;
    margin-top: 0.1rem;
}
#zuo{
    width: 34.6667vw;
    height: 34.6667vw;
}
#zuo img{
    width: 100%;
    height: 100%;
    background-color: rgb(244, 247, 247);
    border-radius: 0.1rem;
}
#you{
    width: 48.5333vw;
    height: 34.6667vw;
}
#yi{
    font-size: 4.2667vw;
    width: 48.5333vw;
    height: 5.8667vw;
    color: rgb(51, 51, 51);
    line-height: 5.8667vw;
    font-weight: 600;
}
#er{
    font-size: 3.2vw;
    width: 48.5333vw;
    height: 4.5333vw;
    color: rgb(119, 119, 119);
    line-height: 4.5333vw;
    font-weight: 400;
}
#san{
    font-size: 3.2vw;
    width: 48.5333vw;
    height: 4.5333vw;
    color: rgb(119, 119, 119);
    line-height: 4.5333vw;
    font-weight: 400;
}
#si{
    width: 48.5333vw;
    height: 4.2667vw;
    display: flex;
    margin-top: 0.05rem;
}
#si #a{
    align-self: center;
    margin-right: 0.05rem;
}
#si #a img{
    width: 19.4667vw;
    height: 4.2667vw;
}
#si #b{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
    background-color: red;
    color: aliceblue;
}
#si #c{
    align-self: center;
    width: 7.8667vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#si #d{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#si #e{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#si #f{
    align-self: center;
    width: 14.6vw;
    height: 4.2667vw;
    text-align: center;
    line-height: 4.2667vw;
}
#si #g{
    align-self: center;
    width: 7.8667vw;
    height: 4.2667vw;
}
#wu{
    width: 48.5333vw;
    font-size: 4.2667vw;
    white-space: pre-wrap;
    height: 5.8667vw;
    line-height: 5.8667vw;
    font-weight: 500;
    margin-top: 0.3rem;
}
</style>